<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doAjaxGet()">$.get(...)</button>
        <button onclick="doAjaxGetJson()">$.getJson(...)</button>
        <button onclick="doAjaxPost()">$.post(...)</button>
        <button onclick="doAjaxPostJSON()">$.postJSON(...)</button>
        <button onclick="doAjaxLoad()">$("selecor").load(...)</button>

    </div>
    <div id="result">

    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        function doAjaxLoad() {
            //1,url
            let url="http://localhost:1314/doGet";
            //2,send ajax get request
            //jquery中load函数语法.load（url【，params】【，callback】）
            $("#result").load(url,function () {//资源加载完成以后执行
                console.log("load complete")
            });//异步加载url对应的资源，然后更新到result位置
        }

        function doAjaxPostJSON() {//向服务端直接
            //1,url
            let url="http://localhost:1314/doPostJSON";
            //2,params
            //let params="id=1&name=xiaomi&letter=x";
            let params={"id":"2","name":"huawei","letter":"h"};//js对象
            //3,send ajax request
            /*$.post(url,params,function (result) {
                console.log(result);
            })*/
            $.ajax({
                type: "POST",
                url: url,
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(params),
                success: function (result) {
                    $("#result").html(result);
                }
            });
        }
        function doAjaxPost() {
            //1,url
            let url="http://localhost:1314/doPost";
            //2,params
            //let params="id=1&name=xiaomi&letter=x";
            let params={"id":"2","name":"huawei","letter":"h"};//js对象
            //3,send ajax request
            $.post(url,params,function (result) {
               console.log(result);
            })
            /*$.ajax({
                type: "POST",
                url: url,
                data: params,
                //conType: "application/json",
                success: function (result) {
                    console.log(result);
                }
            })*/

        }
        function doAjaxGetJson() {
            //1,url
            let url="http://localhost:1314/doGet";
            //2,params
            let params="";
            //3,send ajax request
            $.getJSON(url,params,function (result) {
                console.log(result);
            })
        }
        function doAjaxGet() {
            //1,url
            let url="http://localhost:1314/doGet";
            //2,params
            let params="";
            //3,send ajax request
            $.get(url,params,function (result) {
                console.log(result);
            },"json")

        }
        function doAjax() {
            //1,请求url
            let url="http://localhost:1314/doAjax";
            //2，请求参数
            let params="msg=hello jquery ajax";
            //3，发送异步ajax请求
            $.ajax({
                type:"GET",
                url:url,
                data:params,
                dataType:"text",
                async:true,
                success:function (result) {
                    $("#result").html(result);

                },
                error:function () {
                    $("#result").html("request fail")
                }
            });
        }
    </script>

</body>
</html>